<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" type="text/css" href="css/Gpontslocation.css" />
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=9a1d18c25119c1fc90b8ebb311956081"></script>
		<!--<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />-->

		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<title>线下兑换点</title>
	</head>

	<body>
		<div class="GPolocation_web">
			<div class="lction_city">

				<div id='container' class="con"></div>
				<div id="tip"></div>
				<div id="log"></div>
				<!--<div class="xianshi">
					<p>店名：<span></span></p>
					<p>地址：<span></span></p>
					<p>电话：<span></span></p>
				</div>-->
			</div>
			<div class="content_test">
				<p>赶紧前往张裕白兰地线下兑换点</p>
				<p>领取婚宴定制囍酒套装限量好礼!</p>
			</div>
			<!--尾部-->
			<div class="Ranking_List-foot">
				<a href="index.html">
					<div>
						<img src="img/xiaofangzi.png" />
					</div>
				</a>
			</div>
		</div>

		<script type="text/javascript">
			/***************************************
																																		由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
																																		***************************************/
			var map, geolocation;
			//加载地图，调用浏览器定位服务
			map = new AMap.Map('container', {
				resizeEnable: true
			});
			map.plugin('AMap.Geolocation', function() {
				geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：无穷大
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					buttonPosition: 'RB'
				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
				AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
			});
			//解析定位结果

			function onComplete(data) {
				var str = ['定位成功'];
				str.push('经度：' + data.position.getLng());
				str.push('纬度：' + data.position.getLat());
				var www = data.position.getLat();
				var jdu = data.position.getLng();
				if(data.accuracy) {
					str.push('精度：' + data.accuracy + ' 米');
				} //如为IP精确定位结果则没有精度信息
				str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
				document.getElementById('tip').innerHTML = str.join('<br>');
				var jingdu;
				var weidu;
				$.ajax({
					type: "get",
					url: "json/data.json",
					async: true,
					success: function(res) {
						console.log(res);
						//						$(".xianshi p").eq(0).find("span").text(res[1].shop_name);
//												$(".xianshi p").eq(1).find("span").text(res[1].address);
						//						$(".xianshi p").eq(2).find("span").text(res[1].mobile);
						console.log(res[0].address);

						var n = 100000;
						var a;
						res.sort(function(a, b) {
							return Math.sqrt((jdu - a.JD) * (jdu - a.JD) + (www - a.WD) * (www - a.WD)) - Math.sqrt((jdu - b.JD) * (jdu - b.JD) + (www - b.WD) * (www - b.WD))
						})
						//						console.log(res[0].JD)
						for(var i = 0; i < res.length; i++) {
							var m = Math.sqrt((jdu - res[i].JD) * (jdu - res[i].JD) + (www - res[i].WD) * (www - res[i].WD));
							if(m < n) {
								n = m;
								a = i;

							}

						}
						console.log(res[a].JD)
						console.log(res[a].WD)
						var jingdu = res[a].JD;
						var weidu = res[a].WD;

						addMarker();
						//添加marker标记
						function addMarker() {
							map.clearMap();
							var marker = new AMap.Marker({
								map: map,
								zIndex: 9999999,
								position: [jingdu, weidu]
							});
							//				console.log(marker)
							//鼠标点击marker弹出自定义的信息窗体
							AMap.event.addListener(marker, 'click', function() {
								infoWindow.open(map, marker.getPosition());
							});
						}

						//实例化信息窗体
						var title = '张裕白兰地',
							content = [];
//							content.push("店名："+res[0].shop_name+"");
						content.push("<img src='https://tpc.googlesyndication.com/simgad/5843493769827749134'>店名:"+res[0].shop_name+"<br>地址："+res[0].address+"");
						content.push("电话："+res[0].mobile+"");
//						content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
						var infoWindow = new AMap.InfoWindow({
							isCustom: true, //使用自定义窗体
							content: createInfoWindow(title, content.join("<br/>")),
							offset: new AMap.Pixel(16, -45)
						});

						//构建自定义信息窗体
						function createInfoWindow(title, content) {
							var info = document.createElement("div");
							info.className = "info";

							//可以通过下面的方式修改自定义窗体的宽高
							info.style.width = "400px";
							// 定义顶部标题
							var top = document.createElement("div");
							var titleD = document.createElement("div");
							var closeX = document.createElement("img");
							top.className = "info-top";
							titleD.innerHTML = title;
							closeX.src = "https://webapi.amap.com/images/close2.gif";
							closeX.onclick = closeInfoWindow;

							top.appendChild(titleD);
							top.appendChild(closeX);
							info.appendChild(top);

							// 定义中部内容
							var middle = document.createElement("div");
							middle.className = "info-middle";
							middle.style.backgroundColor = 'white';
							middle.innerHTML = content;
							info.appendChild(middle);

							// 定义底部内容
							var bottom = document.createElement("div");
							bottom.className = "info-bottom";
							bottom.style.position = 'relative';
							bottom.style.top = '0px';
							bottom.style.margin = '0 auto';
							var sharp = document.createElement("img");
							sharp.src = "https://webapi.amap.com/images/sharp.png";
							bottom.appendChild(sharp);
							info.appendChild(bottom);
							return info;
						}

						//关闭信息窗体
						function closeInfoWindow() {
							map.clearInfoWindow();
						}
					}

				});

			}
			//解析定位错误信息
			function onError(data) {
				document.getElementById('tip').innerHTML = '定位失败';
			}

			setTimeout(function() {
				$(".xianshi").css("display", "block");
			}, 3000)

			//信息窗口

			//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
			//						var map = new AMap.Map("container", {
			//							resizeEnable: true,
			//							center: [116.48, 39.99],
			//							zoom: 16
			//						});
		</script>

		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>